<template>
    <div class="view-seat">
        <el-scrollbar height="100%">
            <el-empty description="这里什么也没有" v-if="EntryVOs.length == 0" class="empty-desc" />
            <div v-for="item in EntryVOs" class="scrollbar-demo-item" v-else>
                <div>{{ item.roomName }}</div>
                <div>正在检票：{{ item.checkNum }}人/{{ item.roomContain }}人</div>
                <div>距离开场还有{{ item.distanceTime }}分钟</div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, onMounted, onUnmounted } from 'vue'
import { getEntryInfoByCinemaId } from '../../../../../api/schedule';
interface EntryVO {
    roomName: string;
    roomContain: number;
    checkNum: number;
    distanceTime: number;
}
const cinemaId = JSON.parse(window.sessionStorage.getItem("currentUser")!).unitId
let EntryVOs = ref<EntryVO[]>([])
let timer:any = null

const getEntryInfoByCinemaIdApi = () => {
    getEntryInfoByCinemaId({ cinemaId: cinemaId }).then((res: any) => {
        if (res.code == 200) {
            EntryVOs.value = res.data
        } else {
            ElMessage.error("获取入场信息失败")
        }
    })
}

getEntryInfoByCinemaIdApi()

onMounted(() => {
    timer = setInterval(getEntryInfoByCinemaIdApi,5000)
})

onUnmounted(() => {
    clearInterval(timer)
})

</script>
<style lang='scss' scoped>
.scrollbar-demo-item {
    padding: 5px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

.empty-desc {
    width: 100%;
    height: 100%;
}
</style>